<script setup>
import * as echarts from 'echarts'
import { getEchartsZoomEnd, getEchartsXAxisLabel } from '@/utils/util'
import { onMounted, inject } from 'vue'

const $http = inject('$http')

function getChartData() {
  $http.get('/screen/town/place-code').then(res => {
    const { data = [] } = res || {}

    const xAxis = data.map(item => item.label),
      yData = data.map(item => item.value),
      { zoomShow, zoomEnd } = getEchartsZoomEnd(xAxis, 16)

    option = {
      grid: {
        top: '32',
        bottom: '24',
        left: '16',
        right: '16',
        containLabel: true,
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
        backgroundColor: 'rgba(0,0,0,0.5)',
        borderColor: 'rgba(0,0,0,0)',
        textStyle: {
          color: '#ffffff',
        },
      },
      dataZoom: {
        show: zoomShow,
        type: 'slider',
        realtime: true,
        height: 5,
        start: 0,
        end: zoomEnd,
        textStyle: false,
        zoomLock: true,
        bottom: 10,
        handleSize: 0,
        fillerColor: 'rgba(44, 74, 130, 1)',
        backgroundColor: 'rgba(0, 0, 0, 0)',
        borderColor: 'rgba(0, 0, 0, 0)',
        showDataShadow: false,
        showDetail: false,
        brushSelect: false,
        filterMode: 'empty',
      },
      xAxis: {
        type: 'category',
        data: xAxis,
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.2)',
            width: 1,
            type: 'solid',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          textStyle: {
            color: '#ffffff',
          },
          interval: 0,
          formatter: label => {
            return getEchartsXAxisLabel(label)
          },
        },
        splitLine: {
          show: false,
        },
      },
      yAxis: {
        name: '单位:个',
        type: 'value',
        axisLabel: {
          textStyle: {
            color: '#ffffff',
          },
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.2)',
            width: 1,
            type: 'solid',
          },
        },
        splitLine: {
          show: false,
        },
      },
      series: [
        {
          type: 'bar',
          data: yData,
          barWidth: 10,
          itemStyle: {
            barBorderRadius: 50,
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#D35BD4' },
              { offset: 1, color: '#4B5DC2 ' },
            ]),
          },
        },
      ],
    }

    if (option && typeof option === 'object') {
      myChart.setOption(option)
    }

    window.addEventListener('resize', myChart.resize)
  })
}

var dom
var myChart
var option

onMounted(() => {
  dom = document.getElementById('locatChart')
  myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false,
  })

  getChartData()
})
</script>

<template>
  <div class="locatChartBox">
    <div class="title">各县区累计领取场所码数量</div>

    <div style="height: 100%" id="locatChart" class="charts"></div>
  </div>
</template>

<style lang="less" scoped>
.locatChartBox {
  width: 696px;
  height: 265px;
  background-image: url('@/assets/qrcode/boxbg4.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;

  .title {
    margin-top: 8px;
    width: 100%;
    height: 20px;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .charts {
    flex: 1;
  }
}
</style>
